<template>
	<view class="data-list" :style="{'--price':vuex_config.price}">
		<view class="data-item" v-for="(item,index) in dataList" :key="index">
			<view class="di-t bb-plus flex-tb l1 fw-bold">订单编号：{{item.order_no}}</view>
			<view class="di-c">
				<image style="width: 180rpx;" :src="item.logo || vuex_config.errImg" mode="widthFix"></image>
				<view class="box">
					<view class="">{{item.name}}</view>
					<view class="price">￥{{$price(item.price)}}</view>
				</view>
			</view>
			<view class="di-box">
				<view class="u-font-26 c-99 ">联系人：{{item.user_name}}（{{item.mobile}}）</view>
				<view class="u-font-26 c-99 ">下单时间：{{item.date_creation | format}}</view>
			</view>
			<view @click="_linkTo(item.order_id,item.order_no)"
				:class="['di-b','u-font-26','c-ff','l1','u-flex','u-row-center',item.num - item.validate_num <= 0 ? 'di-b-suc' : '']">
				{{item.num - item.validate_num <= 0?'已核销':'立即核销'}}
			</view>
		</view>
		<sww-load-more :params="dataListParams" v-if="show"></sww-load-more>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/sysPaging'
	import {
		formatDate
	} from '@/utils/moment'
	export default {
		mixins: [pagingMixin],
		props: {
			show: {
				type: Boolean,
				default: true
			},
		},
		filters: {
			format(time) {
				return formatDate(time, 'YYYY-MM-DD HH:mm:ss')
			}
		},
		methods: {
			initPage(params) {
				this._init_data('GetProductOrderByAddressList', params)
			},
			$loadMore() {
				this._load_data()
			},
			_linkTo(order_id,order_no) {
				this.$linkTo(`/package/userSuper/pickUp/writeoffDetail/index?order_id=${order_id}&order_no=${order_no}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.data-list {
		width: 100%;
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}

	.data-item {
		width: 100%;
		background: #fff;
		box-shadow: 0px 0px 16rpx 0px rgba(0, 0, 0, 0.09);
		border-radius: 10rpx 10rpx 0px 0px;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.di-t {
		width: 100%;
		height: 67rpx;
		padding: 0 20rpx;
	}

	.box {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;

		.price {
			color: var(--price);
			padding: 30rpx 0;
		}
	}

	.l1 {
		line-height: 1;
	}

	.c-ff {
		color: #fff;
	}

	.fw-bold {
		font-weight: bold;
	}

	.c-99 {
		color: #999999;
	}

	.bb-plus:after {
		left: 20rpx;
		right: 20rpx;
	}

	.di-box {
		padding: 20rpx;

		view {
			line-height: 40rpx;
		}
	}

	.di-c {
		width: 650rpx;
		padding: 30rpx 0 10rpx;
		margin: 0 20rpx;
		display: flex;
		border-bottom: 1px solid #f1f1f1;
	}

	.di-c view {
		padding: 5rpx 0;
	}

	.di-b {
		width: 100%;
		height: 80rpx;
		background: #E70013;
		border-radius: 0px 0px 10rpx 10rpx;
	}

	.di-b-suc {
		background: #ccc;
	}
</style>
